<template>
  <div class="page">
    <!-- <navbar back="true" title="gradient"></navbar> -->
    <scroller class="main">
      <div class="item">
        <svg class="item-shape">
          <path d="M50,50 A50,50 0 0,1 150,80" strokeWidth="1" fill="rgba(0,235,215,0.5)" />
        </svg>
      </div>
      <div class="item">
        <svg class="item-shape">
          <rect x="100" y="40" width="400" height="400" rx="62" ry="62" fill="#ff0000" />
          <rect x="100" y="190" width="400" height="250" rx="60" ry="60" fill="#eeeeee" />
          <rect x="100" y="190" width="400" height="220" rx="50" ry="50" fill="#ffffff" />
          <rect x="100" y="150" width="400" height="100" fill="#000000" />
          <circle cx="300" cy="220" r="100" fill="#000000" />
          <circle cx="300" cy="220" r="50" fill="#ffffff" />
        </svg>
      </div>

      <text class="desc">The linearGradient element lets users define linear gradients to fill or stroke graphical elements</text>
      <div class="item">
        <svg class="item-shape">
          <defs>
            <linearGradient id="myLinearGradient1"
                            x1="0%" y1="0%"
                            x2="0%" y2="100%"
                            spreadMethod="pad">
              <stop offset="0%" stop-color="#3498db"/>
              <stop offset="100%" stop-color="#ff0000"/>

            </linearGradient>
          </defs>
          <rect x="100" y="50" width="300" height="300" fill="url(#myLinearGradient1)" />
        </svg>
        <text class="desc">linearGradient</text>
      </div>
      <text class="desc">Radial gradients are gradients in which the colors change circularly rather than linearly</text>
      <div class="item">
        <svg class="item-shape">
          <defs>
            <radialGradient 
                id="myRadialGradient"
                cx="50%"
                cy="50%"
                r="50%"
                fx="50%"
                fy="50%"
                spreadMethod="pad">
              <stop offset="0%"   stop-color="#ffffff"/>
              <stop offset="100%" stop-color="#2443df"/>
            </radialGradient>
          </defs>
          <circle  cx="300" cy="200" r="150" fill="url(#myRadialGradient)" />
        </svg>
        <text class="desc">radialGradient</text>
      </div>
      <div class="item">
          <svg class="item-shape">
              <defs>
            <radialGradient 
                id="myRadialGradient2"
                cx="50%"
                cy="50%"
                r="50%"
                fx="50%"
                fy="50%"
                spreadMethod="pad">
              <stop offset="0%"   stop-color="#ffffff"/>
              <stop offset="100%" stop-color="#2443df"/>
            </radialGradient>
          </defs>
              <ellipse cx="300" cy="80" rx="100" ry="50" fill="url(#myRadialGradient2)" stroke-width="2" stroke="purple" />
          </svg>
      </div>
      <div class="item">
        <svg class="item-shape">
          <circle cx="100" cy="70" r="40" fill='rgba(233,20,210,1)'/>
          <circle cx="140" cy="70" r="40" fill='rgba(20,230,20,0.5)'/>
        </svg>
      </div>
    </scroller>
  </div>
</template>

<style>
.page {
  flex: 1;
  padding-top: 20px;
}
.main {
  padding-top: 88px;
  background-color: #ff0;
}
.desc {
  margin: 20px;
  font-size: 28px;
  text-align: left;
  color: #444;
}
.item {
  align-items: center;
  margin: 20px;
  padding: 10px;
  border-bottom: 2px solid #ddd;
}
.item-shape {
  width: 600px;
  height: 480px;
}
</style>

<script>
// import navbar from '../include/navbar.vue';
module.exports = {
  components: {
    // navbar
  }
};
</script>